<!-- Client Desired -->
<template>
  <el-card shadow="never"
           class="aui-card--fill cui-custom-css-get-started">
    <el-form label-width="0"
             class="timezone-and-psa">
      <el-button v-if="isIntegration && $hasPermission('sys:tenant:priorityrules')" @click="setRules" type="primary" size="small" class="rules">Priority Rules</el-button>
      <el-form-item :label="isIntegration ? '1.' + $t('custom.client.featureRequest') : $t('custom.client.featureRequest')">
        <el-select v-model="dataForm.title"
                   class="width-50">
          <el-option v-for="(item,index) in typeList"
                     :key="index"
                     :value="item"></el-option>
        </el-select>
      </el-form-item>
      <template v-if="!isIntegration">
        <el-form-item :label="$t('custom.client.featureRelatedRequest')">
          <el-select v-model="dataForm.categories"
                     class="width-50">
            <el-option v-for="item in categoriesList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="dataForm.title === 'General Feature'">
          <el-form-item :label="$t('custom.client.summaryRequest')">
            <el-input v-model="dataForm.summary"
                      class="width-50"
                      type="textarea"
                      :rows="2"
                      :maxlength="summaryLength"
                      show-word-limit
                      :placeholder="$t('custom.client.summary')"></el-input>
          </el-form-item>
          <el-form-item label="Description of your requested feature">
            <el-input v-model="dataForm.description"
                      class="width-50"
                      type="textarea"
                      :rows="3"
                      placeholder="Description"></el-input>
          </el-form-item>
          <el-form-item label="How is this important?">
            <el-input v-model="dataForm.reason"
                      class="width-50"
                      type="textarea"
                      :rows="3"
                      placeholder="Reason"></el-input>
          </el-form-item>
          <el-form-item label="Priority">
            <el-select v-model="dataForm.priority"
                       class="width-50">
              <el-option v-for="item in priorityList"
                         :key="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-if="dataForm.title === 'New Bot'">
          <el-form-item :label="$t('custom.client.summaryRequest')">
            <el-input v-model="dataForm.summary"
                      class="width-50"
                      type="textarea"
                      :rows="2"
                      :maxlength="summaryLength"
                      show-word-limit
                      :placeholder="$t('custom.client.summary')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('custom.client.problem')">
            <el-input v-model="dataForm.problems"
                      class="width-50"
                      type="textarea"
                      :rows="3"
                      :placeholder="$t('custom.client.wProblem')"></el-input>
          </el-form-item>
          <!-- <el-form-item label="Do you have a dashboard that can be used to dashboard the issue?"> -->
          <el-form-item label="Is there any dashboard that you are using today to address this problem?">
            <el-radio v-model="dataForm.hasReportsIssue"
                      label="yes">Yes</el-radio>
            <el-radio v-model="dataForm.hasReportsIssue"
                      label="no">No</el-radio>
          </el-form-item>
          <el-form-item label="Where is the dashboard located?"
                        v-if="dataForm.hasReportsIssue === 'yes'">
            <el-input v-model="dataForm.howAccess"
                      class="width-50"
                      type="textarea"
                      :rows="2"
                      placeholder="The dashboard located"></el-input>
            <!-- placeholder="Please provide the info about how to access the dashboard."></el-input> -->
          </el-form-item>
          <el-form-item label="When should this bot be triggered?">
            If
            <el-input v-model="dataForm.triggeredReason"
                      class="width-25"></el-input>
            , then send a message.
            <i>(e.g., it's 4:50PM on weekdays, it's 10 minutes before a technician's clock-out time, a new entry is created, a ticket is closed, etc.)</i>
          </el-form-item>
          <el-form-item label="Where do you want to send the message?">
            <el-select v-model="dataForm.sendFrom"
                       class="width-50">
              <el-option v-for="item in sendFromList"
                         :key="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Details of the message to be sent if the bot is triggered:">
            <el-form label-width="0"
                     class="timezone-and-psa"
                     style="padding-left:30px;">
              <el-form-item label="What happened?">
                <el-input v-model="dataForm.botSendMsg.what"
                          class="width-50"
                          type="textarea"
                          :rows="1"
                          placeholder="(e.g., Dear <firstname>, you forgot to add the Next Steps in your time entry.)"></el-input>
              </el-form-item>
              <el-form-item label="What should the recipient be asked to do?">
                <el-input v-model="dataForm.botSendMsg.how"
                          class="width-50"
                          type="textarea"
                          :rows="1"
                          placeholder="(e.g., Please add the Next Steps in your time entry as soon as possible.)"></el-input>
              </el-form-item>
              <el-form-item label="Why should the recipient do it?">
                <el-input v-model="dataForm.botSendMsg.why"
                          class="width-50"
                          type="textarea"
                          :rows="1"
                          placeholder="(e.g., Writing the Next Steps will help the next tech to resolve the ticket faster.)"></el-input>
              </el-form-item>
            </el-form>
          </el-form-item>
          <el-form-item :label="$t('custom.client.suggest')">
            <el-input v-model="dataForm.newBotsName"
                      class="width-50"
                      :placeholder="$t('custom.client.prompter')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('custom.client.desc')">
            <el-input v-model="dataForm.newBotsDescription"
                      class="width-50"
                      type="textarea"
                      :rows="1"
                      :placeholder="$t('custom.client.newBotsDescription')"></el-input>
          </el-form-item>
          <el-form-item label="Priority">
            <el-select v-model="dataForm.priority"
                       class="width-50">
              <el-option v-for="item in priorityList"
                         :key="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-if="dataForm.title === 'New Dashboard' || dataForm.title === 'New Scorecard'">
          <el-form-item :label="$t('custom.client.summaryRequest')">
            <el-input v-model="dataForm.summary"
                      class="width-50"
                      type="textarea"
                      :rows="2"
                      :maxlength="summaryLength"
                      show-word-limit
                      :placeholder="$t('custom.client.summary')"></el-input>
          </el-form-item>
          <el-form-item :label="`${$t('custom.client.wCaseReport',{type:type})}?`">
            <el-input v-model="dataForm.businessUseCase"
                      class="width-50"
                      type="textarea"
                      :rows="3"
                      :placeholder="$t('custom.client.caseReport',{type:type})"></el-input>
          </el-form-item>
          <el-form-item :label="$t('custom.client.exist',{type:type})">
            <el-radio v-model="dataForm.hasOtherReports"
                      label="yes">Yes</el-radio>
            <el-radio v-model="dataForm.hasOtherReports"
                      label="no">No</el-radio>
          </el-form-item>
          <template v-if="dataForm.hasOtherReports === 'yes'">
            <el-form-item :label="`${$t('custom.client.accessed',{type:type})}?`">
              <el-input v-model="dataForm.getOtherReports"
                        class="width-50"
                        type="textarea"
                        :rows="3"
                        :placeholder="$t('custom.client.accessed',{type:type})"></el-input>
            </el-form-item>
            <el-form-item :label="`${$t('custom.client.mostInfo',{type:type})}?`">
              <el-input v-model="dataForm.infoOtherReports"
                        class="width-50"
                        type="textarea"
                        :rows="3"
                        :placeholder="$t('custom.client.mostInfo',{type:type})"></el-input>
            </el-form-item>
          </template>
          <el-form-item :label="$t('custom.client.priority')">
            <el-select v-model="dataForm.priority"
                       class="width-50">
              <el-option v-for="item in priorityList"
                         :key="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="submitForm">{{$t('submit')}}</el-button>
        </el-form-item>
      </template>
      <el-col :span="12" v-else style="min-height: 100px;" v-loading="loading">

        <UserFormMaking ref="userFormMaking"
                         :visible="visible"
                        @on-change="onChange"
                         @closeLoading="closeLoading"
                         :userformData="integrationData"></UserFormMaking>
        <user-form-dialog :userformDialogData="userFormDialogData" width="950px" ref="userFormDialog" />
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="submitForm">{{$t('submit')}}</el-button>
          <el-button size="small" @click="seeResultUrl">See Result</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </el-card>
</template>

<script>
import UserFormMaking from "@/components/form-making/userFormMaking.vue";
import userFormDialog from "@/views/modules/mspbots/FormList/FormData/userFormDialog.vue";
import {transformTimeZone} from "@/filters/index";
import config from  '@/utils/config'
export default {
  components: {UserFormMaking, userFormDialog},
  data () {
    return {
      visible: false,
      loading: false,
      isIntegration: false,
      integrationData: {
        isNew: true,
        formCode: '',
      },
      userFormDialogData: {
        formCode: '',
      },
      tenantData: [],  // current tenant submit Integration Data count
      typeList: ['General Feature', 'New Bot', 'New Dashboard', 'New Scorecard', 'New Integration'],
      seeResult: '',
      categoriesList: [],
      priorityList: ['Low', 'Medium', 'High'],
      sendFromList: ['Teams - Specific User/s', 'Teams - Specific Channel/s', 'Email'],
      summaryLength: 200,
      dataForm: {
        title: null,
        categories: null,
        summary: null,
        description: null,
        reason: null,
        priority: null,
        problems: null,
        hasReportsIssue: null,
        howAccess: null,
        triggeredReason: null,
        sendFrom: null,
        botSendMsg: {
          what: null,
          how: null,
          why: null
        },
        newBotsName: null,
        newBotsDescription: null,
        businessUseCase: null,
        hasOtherReports: 'yes',
        getOtherReports: null
      }
    }
  },
  created () {
    this.getCategoriesList()
    this.createdPageVerifyUserName()
   try {
     const list = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'new_integration').dataList
     this.integrationData.formCode = list[0].dictValue
     this.seeResult = list[1].dictValue
     this.userFormDialogData.formCode = list[2].dictValue
     this.getIntegration()
   } catch (e) {
      console.log(e)
   }
  },
  watch: {
    'dataForm.title' (val) {
      this.isIntegration = val === 'New Integration'
      this.$nextTick(() => {
        this.loading = val === 'New Integration'
        this.getIntegration()
      })
    },
  },
  computed: {
    type () {
      if (this.dataForm.title === 'New Dashboard') {
        return 'dashboard'
      }
      if (this.dataForm.title === 'New Scorecard') {
        return 'scorecard'
      }

      return ''
    },
  },
  methods: {
    onChange (field, value, data) {
      console.log(field, value, data)
      if (field === 'key2') {
        const once = this._.find(this.tenantData, item => {
          return item.dataContent[field] === value
        })
        if (once) {
          const str = `The integration has been submitted by ${once.dataContent[field]} on ${transformTimeZone(once.createTime)} with the following answers. Please review if any adjustments are needed.`
          this.$confirm(str, '', {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }).then(() => {
            this.integrationData = {
              isNew: false,
              formTitle: '',
              formCode: once.formCode,
              id: once.id
            }
          }).catch(() => {
            this.$refs.userFormMaking.$refs.generateForm.setData({
              'key2': ''
            })
          })
        } else {
          const values = this.$refs.userFormMaking.$refs.generateForm.getValues()
          Object.keys(values).map(item => {
            if (item !== 'key2') {
              values[item] = null
            }
          })
          this.$refs.userFormMaking.$refs.generateForm.setData(values)
        }
      }
    },
    setRules () {
      this.grantAccessLoading = true
      const params = { current: 1, size: 1, desc: 'create_time', formCode: this.userFormDialogData.formCode }
      this.$interface.reports.getFormDataListApi(params).then(res => {
        this.grantAccessLoading = false
        if (res.data.data.records.length > 0) {
          this.userFormDialogData = {
            isNew: false,
            formTitle: '',
            formCode: this.userFormDialogData.formCode,
            id: res.data.data.records[0].id
          }
          this.$refs.userFormDialog.visible = true
        } else {
          this.userFormDialogData = { isNew: true, formCode: this.userFormDialogData.formCode, formTitle: '' }
          this.$refs.userFormDialog.visible = true
        }
      }).finally(() => {
        this.grantAccessLoading = false
      })
    },
    seeResultUrl () {
      window.open(this.seeResult)
    },
    closeLoading () {
      this.loading = false
    },
    createdPageVerifyUserName () {
      this.hasUserInForum()
        .catch(() => {
          // this.$message.error('Please try again.')
        })
        .then(({ data: { data } }) => {
          if (data.user_emails && data.user_emails.length > 0 && data.user_emails[0].user_id) {
          } else {
            this.$alert("You need to <a href='https://forum.mspbots.ai' target='_blank'>register</a> first in the Forum in order to submit a new feature request.", 'Warning', {
              showCancelButton: true,
              dangerouslyUseHTMLString: true,
              cancelButtonText: 'Cancel',
              confirmButtonText: 'Go Sign Up',
              callback: e => {
                if (e === 'confirm') {
                  window.open('https://forum.mspbots.ai', '_blank')
                }
              }
            })
          }
        })
    },
    async submitForm () {
      let values = {}
      if (this.dataForm.title === 'New Integration') {
        values = this.$refs.userFormMaking.$refs.generateForm.getValues()
      }
      if (this.isIntegration) {
        await this.submitIntegration()
      } else {
        if (!this.verifyForm()) {
          return false
        }
      }
      this.hasUserInForum()
        .catch(() => {
          // this.$message.error('Please try again.')
        })
        .then(({ data: { data } }) => {
          if (data.user_emails && data.user_emails.length > 0 && data.user_emails[0].user_id) {
            //  data.user_emails[0].user_id
            this.getForumUsername(data.user_emails[0].user_id)
              .then(({ data: { data } }) => {
                if (data.users && data.users.length > 0 && data.users[0].username) {
                  // data.users[0].username
                  this.sendPostToDiscourse(data.users[0].username, values)
                    .then(res => {
                      try {
                        if (res.data.id) {
                          // this.$message.success('Success')
                          this.sendEmailToClient(res.data.topic_slug, res.data.topic_id)
                            .then(ees => {
                              if (ees.data.code === 0 && ees.data.data === 'success') {
                                this.$message.success('Success')
                              }
                            })
                          // this.saveClientDesired()
                          Object.assign(this.$data, this.$options.data())
                          this.$nextTick(() => {
                            this.getCategoriesList()
                          })
                        }
                      } catch (e) {
                        this.$message.error('Error, Please try again.')
                      }
                    }, err => {
                      return this.$message.error(err.response.data.errors[0])
                    })
                }
              })
          } else {
            this.$alert("You need to <a href='https://forum.mspbots.ai' target='_blank'>register</a> first in the Forum in order to submit a new feature request.", 'Warning', {
              showCancelButton: true,
              dangerouslyUseHTMLString: true,
              cancelButtonText: 'Cancel',
              confirmButtonText: 'Go Sign Up',
              callback: e => {
                if (e === 'confirm') {
                  window.open('https://forum.mspbots.ai', '_blank')
                }
              }
            })
          }
        })
    },
    async getIntegration () {
      const params = { current: 1, desc: 'create_time', formCode: this.integrationData.formCode }
      const { getFormDataListApi } = this.$interface.reports
      const { data } = await getFormDataListApi(params)
      this.tenantData = data.data.records.filter(item => {
        return item.tenantCode === this.$store.state.user.tenantCode
      })
      this.loading = false
    },
    async submitIntegration () {
      const values = this.$refs.userFormMaking.$refs.generateForm.getValues()
      console.log('submitIntegration', values)
      if (values['key2'] === 'Other') {
        await this.formSaveIntegration(values['other'])
        this.$refs.userFormMaking.$refs.generateForm.setData({
          'key2': values['other']
        })
      }
      this.$nextTick(async () => {
        await this.$refs.userFormMaking.addOrUpdateFormData()
        await this.getIntegration()
      })
    },
    async formSaveIntegration (value) {
      const params = {
        gadgetId: config.integrationWidget,
        gadgettype: 'gridgadget',
        type: 'widget',
        code: 'SOPHOS'
      }
      const { getReportDataInfo, addOrUpdateFormDataApi } = this.$interface.reports
      const { data } = await getReportDataInfo(params)
      const info = data.data
      info.push({ 'Integrations': value })
      const saveParams = {
        id: config.integrationFormId,
        dataContent: {
          'Integrationsform': info
        }
      }
      await addOrUpdateFormDataApi(saveParams)
    },
    getForumUsername (userId) {
      const params = {
        query: `query UsernameQuery{
            users(where: {id: {_eq: ${userId}}}) {
              username
            }
          }`,
        operationName: 'UsernameQuery'
      }
      return this.$interface.graphql.graphqlApi(params)
    },
    hasUserInForum () {
      let useremail = this.$store.state.user.email
      const params = {
        query: `query EmailQuery{
            user_emails(where: {email: {_ilike: "${useremail}"}}) {
              email
              user_id
            }
          }`,
        operationName: 'EmailQuery'
      }
      return this.$interface.graphql.graphqlApi(params)
    },
    sendPostToDiscourse (username, values) {
      const title = this.dataForm.title !== 'New Integration' ? this.dataForm.summary : values['key2'] === 'Other' ? values['other'] : values['key2']
      const params = {
        'title': `[${this.dataForm.title}] ${title}`,
        'raw': this.formatTopicContent(values),
        'category': this.dataForm.title === 'New Integration' ? 16 : this.dataForm.categories
      }
      if (this.dataForm.title !== 'New Integration') {
        this.createJiraIssue()
      }
      // const username = this.$store.state.user.name
      return this.$discussion.discussion(params, username)
    },
    createJiraIssue() {
      let params = this.createJiraIssueContent()
      this.$interface.clientDesired.postCreateJiraIssueApi(params)
    },
    getCate (id) {
      let name = ''
      let res = this.categoriesList.find(i => i.id === id)
      if (res) {
        name = res.name
      }
      return name
    },
    createJiraIssueContent () {
      const generalFeature = () => {
        return {
          projectName: 'HELP',
          priorityName: this.dataForm.priority,
          summary: `[${this.dataForm.title}] ${this.dataForm.summary}`,
          description: `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
          <b>Description of your requested feature </b>${this.dataForm.description}<br>
          <b>How is this important? </b>${this.dataForm.reason}<br>`,
          typeName: 'Feature',
          reporterName: this.$store.state.user.username.split('@')[0],
          tenantCode: this.$store.state.user.tenantCode
        }
      }
      const newBots = () => {
        if (this.dataForm.hasReportsIssue === 'yes') {
        return {
            projectName: 'HELP',
            priorityName: this.dataForm.priority,
            summary: `[${this.dataForm.title}] ${this.dataForm.summary}`,
            description: `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
            <b>What problem/s will this bot address? </b>${this.dataForm.problems}<br>
        <b>Is there any dashboard that you are using today to address this problem? </b>${this.dataForm.hasReportsIssue}<br>
        <b>Where is the dashboard located? </b>${this.dataForm.howAccess}<br>
        <b>When should this bot be triggered? </b>If ${this.dataForm.triggeredReason}, then send a message.<br>
        <b>Where do you want to send the message? </b>${this.dataForm.sendFrom}<br>
        <b>Details of the message to be sent if the bot is triggered: </b><br>
        &nbsp;&nbsp;&nbsp;<b>What happened? </b>${this.dataForm.botSendMsg.what}<br>
        &nbsp;&nbsp;&nbsp;<b>What should the recipient be asked to do? </b>${this.dataForm.botSendMsg.how}<br>
        &nbsp;&nbsp;&nbsp;<b>Why should the recipient do it? </b>${this.dataForm.botSendMsg.why}<br>
        <b>Suggest a name for this bot: </b>${this.dataForm.newBotsName}<br>
        <b>Description of this bot: </b>${this.dataForm.newBotsDescription}<br>`,
            typeName: 'Bots',
            reporterName: this.$store.state.user.username.split('@')[0],
            tenantCode: this.$store.state.user.tenantCode
          }
        } else {
        return {
            projectName: 'HELP',
            priorityName: this.dataForm.priority,
            summary: `[${this.dataForm.title}] ${this.dataForm.summary}`,
            description: `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
            <b>What problem/s will this bot address? </b>${this.dataForm.problems}<br>
        <b>Is there any dashboard that you are using today to address this problem? </b>${this.dataForm.hasReportsIssue}<br>
        <b>When should this bot be triggered? </b>If ${this.dataForm.triggeredReason}, then send a message.<br>
        <b>Where do you want to send the message? </b>${this.dataForm.sendFrom}<br>
        <b>Details of the message to be sent if the bot is triggered: </b><br>
        &nbsp;&nbsp;&nbsp;<b>What happened? </b>${this.dataForm.botSendMsg.what}<br>
        &nbsp;&nbsp;&nbsp;<b>What should the recipient be asked to do? </b>${this.dataForm.botSendMsg.how}<br>
        &nbsp;&nbsp;&nbsp;<b>Why should the recipient do it? </b>${this.dataForm.botSendMsg.why}<br>
        <b>Suggest a name for this bot: </b>${this.dataForm.newBotsName}<br>
        <b>Description of this bot: </b>${this.dataForm.newBotsDescription}<br>`,
            typeName: 'Bots',
            reporterName: this.$store.state.user.username.split('@')[0],
            tenantCode: this.$store.state.user.tenantCode
          }

        }
      }
      const newReports = () => {
        if (this.dataForm.hasOtherReports === 'yes') {
          return {
            projectName: 'HELP',
            priorityName: this.dataForm.priority,
            summary: `[${this.dataForm.title}] ${this.dataForm.summary}`,
            description: `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
            <b>The business use case: </b>${this.dataForm.businessUseCase}<br>
          <b>Do you have reports that exist in another app/software? </b>${this.dataForm.hasOtherReports}<br>
          <b>How is that ${this.dataForm.title === 'New Dashboard'?'dashboard':'scorecard'} accessed? </b>${this.dataForm.getOtherReports}<br>
          <b>What is the most important information in that ${this.dataForm.title === 'New Dashboard'?'dashboard':'scorecard'}? </b>${this.dataForm.infoOtherReports}<br>`,
            typeName: this.dataForm.title === 'New Dashboard'?'Dashboard':'Scorecards',
            reporterName: this.$store.state.user.username.split('@')[0],
            tenantCode: this.$store.state.user.tenantCode
          }
          
        } else {
          return {
            projectName: 'HELP',
            priorityName: this.dataForm.priority,
            summary: `[${this.dataForm.title}] ${this.dataForm.summary}`,
            description: `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
            <b>The business use case: </b>${this.dataForm.businessUseCase}<br>
          <b>Do you have reports that exist in another app/software? </b>${this.dataForm.hasOtherReports}<br>`,
            typeName: this.dataForm.title === 'New Dashboard'?'Dashboard':'Scorecards',
            reporterName: this.$store.state.user.username.split('@')[0],
            tenantCode: this.$store.state.user.tenantCode
          }
        }
      }
      if (this.dataForm.title === 'General Feature') return generalFeature()
      if (this.dataForm.title === 'New Bot') return newBots()
      if (this.dataForm.title === 'New Dashboard'||this.dataForm.title === 'New Scorecard') return newReports()
    },
    saveClientDesired () {
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        type: 'desired',
        status: 'New',
        // messageId: null,
        email: this.$store.state.user.email,
        description: JSON.stringify(this.dataForm)
      }
      return this.$interface.login.postFeedBack(params)
    },
    sendEmailToClient (topicName, topicId) {
      const params = {
        businessType: 'New Feature Request',
        toAddress: this.$store.state.user.email,
        subject: `[${this.dataForm.title}] ${this.dataForm.summary}`,
        content: `<div style='line-height:2em;'>
        Dear user,<br>
        Your new feature request is posted, you can visit your post here at [<a style='text-decoration:none;' href='https://forum.mspbots.ai/t/${topicName}/${topicId}'>Post URL<a>]<br>
        We plan our dev plan based on the voting each request gets, please ask your employee or peer group to vote the post and participate in the discussion.<br>
        The MSPbots Staff member and the dev team will ask more clarifying questions in the forum, your prompt response will help us understand the request better, therefore, we can deliver it to you faster.<br>
        If you have any questions, please contact us by sending an email at <a style='text-decoration:none;' href='mailto:support@mspbots.ai'>support@mspbots.ai</a><br>
        Thanks!<br>
        MSPbots.ai
        </div>`
      }
      return this.$interface.clientDesired.sendEmailApi(params)
    },
    formatTopicContent (values) {
      const generalFeature = () => {
        return `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
        <b>Summary: </b>${this.dataForm.summary}<br>
        <b>Description: </b>${this.dataForm.description}<br>
        <b>Why: </b>${this.dataForm.reason}<br>
        <b>Priority: </b>${this.dataForm.priority}<br>`
      }
      const newBots = () => {
        if (this.dataForm.hasReportsIssue === 'yes') {
          return `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
          <b>Summary: </b>${this.dataForm.summary}<br>
        <b>What problem/s will this bot address? </b>${this.dataForm.problems}<br>
        <b>Is there any dashboard that you are using today to address this problem? </b>${this.dataForm.hasReportsIssue}<br>
        <b>Where is the dashboard located? </b>${this.dataForm.howAccess}<br>
        <b>When should this bot be triggered? </b>If ${this.dataForm.triggeredReason}, then send a message.<br>
        <b>Where do you want to send the message? </b>${this.dataForm.sendFrom}<br>
        <b>Details of the message to be sent if the bot is triggered: </b><br>
        &nbsp;&nbsp;&nbsp;<b>What happened? </b>${this.dataForm.botSendMsg.what}<br>
        &nbsp;&nbsp;&nbsp;<b>What should the recipient be asked to do? </b>${this.dataForm.botSendMsg.how}<br>
        &nbsp;&nbsp;&nbsp;<b>Why should the recipient do it? </b>${this.dataForm.botSendMsg.why}<br>
        <b>Suggest a name for this bot: </b>${this.dataForm.newBotsName}<br>
        <b>Description of this bot: </b>${this.dataForm.newBotsDescription}<br>
        <b>Priority: </b>${this.dataForm.priority}<br>`
        } else {
          return `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
          <b>Summary: </b>${this.dataForm.summary}<br>
        <b>What problem/s will this bot address? </b>${this.dataForm.problems}<br>
        <b>Is there any dashboard that you are using today to address this problem? </b>${this.dataForm.hasReportsIssue}<br>
        <b>When should this bot be triggered? </b>If ${this.dataForm.triggeredReason}, then send a message.<br>
        <b>Where do you want to send the message? </b>${this.dataForm.sendFrom}<br>
        <b>Details of the message to be sent if the bot is triggered: </b><br>
        &nbsp;&nbsp;&nbsp;<b>What happened? </b>${this.dataForm.botSendMsg.what}<br>
        &nbsp;&nbsp;&nbsp;<b>What should the recipient be asked to do? </b>${this.dataForm.botSendMsg.how}<br>
        &nbsp;&nbsp;&nbsp;<b>Why should the recipient do it? </b>${this.dataForm.botSendMsg.why}<br>
        <b>Suggest a name for this bot: </b>${this.dataForm.newBotsName}<br>
        <b>Description of this bot: </b>${this.dataForm.newBotsDescription}<br>
        <b>Priority: </b>${this.dataForm.priority}<br>`
        }
      }
      const newReports = () => {
        if (this.dataForm.hasOtherReports === 'yes') {
          return `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
          <b>Summary: </b>${this.dataForm.summary}<br>
          <b>The business use case: </b>${this.dataForm.businessUseCase}<br>
          <b>Do you have reports that exist in another app/software? </b>${this.dataForm.hasOtherReports}<br>
          <b>How is that ${this.dataForm.title === 'New Dashboard'?'dashboard':'scorecard'} accessed? </b>${this.dataForm.getOtherReports}<br>
          <b>What is the most important information in that ${this.dataForm.title === 'New Dashboard'?'dashboard':'scorecard'}? </b>${this.dataForm.infoOtherReports}<br>
          <b>Priority: </b>${this.dataForm.priority}<br>`
        } else {
          return `<b>To which integration/function area is this feature request related? </b>${this.getCate(this.dataForm.categories)}<br>
          <b>Summary: </b>${this.dataForm.summary}<br>
          <b>The business use case: </b>${this.dataForm.businessUseCase}<br>
          <b>Do you have reports that exist in another app/software? </b>${this.dataForm.hasOtherReports}<br>
          <b>Priority: </b>${this.dataForm.priority}<br>`
        }
      }
      const newIntegration = () => {
        return `<b>To which integration/function area is this feature request related? </b>Integration<br>
        <b>Integration name: </b>${values['key2'] === 'Other' ? values['other'] : values['key2'] }<br>
        <b>Do you have the dataset API in your mind already?: </b>${values['key4']}<br>
        <b>Do you have widgets design already?: </b>${values['key5']}<br>
        <b>Do you have bot use case already?: </b>${values['key6']}<br>
        <b>Where is the API documentation URL?: </b>${values['key8']}<br>
        <b>pay?: </b>${values['key9']}<br>
        <b>Priority: </b>Medium<br>`
      }
      if (this.dataForm.title === 'General Feature') return generalFeature()
      if (this.dataForm.title === 'New Bot') return newBots()
      if (this.dataForm.title === 'New Dashboard'||this.dataForm.title === 'New Scorecard') return newReports()
      if (this.dataForm.title === 'New Integration') return newIntegration()
    },
    getCategoriesList () {
      // /categories.json
      this.$discussion.categories()
        .then(res => {
          this.categoriesList = res.data.category_list.categories
        })
        .catch(() => {
          this.categoriesList = []
          setTimeout(() => {
            this.getCategoriesList()
          }, 6000)
        })
    },
    verifyForm () {
      const generalFeature = () => {
        if (!this.dataForm.summary) {
          this.$message.error('Summary of your request is required.')
          return false
        }
        if (!this.dataForm.description) {
          this.$message.error('Description of the feature is required.')
          return false
        }
        if (!this.dataForm.reason) {
          this.$message.error('Why this is important is required.')
          return false
        }
        if (!this.dataForm.priority) {
          this.$message.error('Priority is required.')
          return false
        }
        return true
      }
      const newBots = () => {
        if (!this.dataForm.summary) {
          this.$message.error('Summary of your request is required.')
          return false
        }
        if (!this.dataForm.problems) {
          this.$message.error('What problem/s will this bot fix is required.')
          return false
        }
        if (!this.dataForm.hasReportsIssue) {
          this.$message.error('Do you have a dashboard that can be used to dashboard the issue is required.')
          return false
        } else if (this.dataForm.hasReportsIssue === 'yes') {
          if (!this.dataForm.howAccess) {
            this.$message.error('Please provide the info about how to access the dashboard.')
            return false
          }
        }
        if (!this.dataForm.triggeredReason) {
          this.$message.error('When should this bot be triggered is required.')
          return false
        }
        if (!this.dataForm.sendFrom) {
          this.$message.error('Where do you want to send the message is required.')
          return false
        }
        if (!this.dataForm.botSendMsg.what || !this.dataForm.botSendMsg.how || !this.dataForm.botSendMsg.why) {
          this.$message.error('Details of the message to be sent if the bot is triggered is required.')
          return false
        }
        if (!this.dataForm.newBotsName) {
          this.$message.error('Suggest a name for this bot is required.')
          return false
        }
        if (!this.dataForm.newBotsDescription) {
          this.$message.error('Description of this bot is required.')
          return false
        }
        if (!this.dataForm.priority) {
          this.$message.error('Priority is required.')
          return false
        }
        return true
      }
      const newReports = () => {
        if (!this.dataForm.summary) {
          this.$message.error('Summary of your request is required.')
          return false
        }
        if (!this.dataForm.businessUseCase) {
          this.$message.error('The business use case for this dashboard is required.')
          return false
        }
        if (!this.dataForm.hasOtherReports) {
          this.$message.error('Reports that exist in other software already is required.')
          return false
        } else if (this.dataForm.hasOtherReports === 'yes') {
          if (!this.dataForm.getOtherReports) {
            this.$message.error('How to get access to that dashboard is required.')
            return false
          }
          if (!this.dataForm.infoOtherReports) {
            this.$message.error('Information in that dashboard is required.')
            return false
          }
        }
        if (!this.dataForm.priority) {
          this.$message.error('Priority is required.')
          return false
        }
        return true
      }
      if (!this.dataForm.title) {
        this.$message.error('The type of the new feature request is required.')
        return false
      }
      if (!this.dataForm.categories) {
        this.$message.error('The integration/function area is required.')
        return false
      }
      if (this.dataForm.title === 'General Feature') return generalFeature()
      if (this.dataForm.title === 'New Bot') return newBots()
      if (this.dataForm.title === 'New Dashboard'||this.dataForm.title === 'New Scorecard') return newReports()
      return true
    }
  }
}
</script>

<style scoped lang="scss">
.aui-card--fill {
  position: relative;
  .rules {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
.width-50 {
  width: 50% !important;
}
.width-25 {
  width: 25% !important;
}

::v-deep .fm-form {
  padding: 0;
}
</style>
